<template>
	<view class="">
		<view class="wrap">
			<view class="demo-warter" v-for="(item, index) in list" :key="index">
				<!-- 警告：微信小程序中需要hx2.8.11版本才支持在template中结合其他组件，比如下方的lazy-load组件 -->
				<u-lazy-load @click="detailCli(item._id)" threshold="-450" border-radius="10" :image="item.imgSrc" :index="index">
				</u-lazy-load>
				<view class="demo-title">
					{{item.nickname}}
					<view class="mylikes">
						<view @click="addlikes(item)"  class="iconfont icon-icon-test5"></view>
						<view style="font-size: 30rpx; color: red; padding-left: 10rpx;">{{beautify(item.likes)}}</view>
					</view>
					
				</view>
				<u-icon name="close-circle-fill" color="#fa3534" size="34" class="u-close"
					@click="remove(item.id)"></u-icon>
			</view>
			
			
			<!-- <u-button @click="clear">清空列表</u-button> -->
			<!-- <img src="https://img9.doubanio.com/view/group_topic/l/public/p465391666.webp" alt=""> -->
			<!-- <u-loadmore bg-color="rgb(240, 240, 240)" :status="loadStatus" @loadmore="addRandomData"></u-loadmore> -->
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				loadStatus: 'loadmore',
				flowList: [],
				list: []
			}
		},
		
		props:['current'],
	
		
		onReady() {
			const db = uniCloud.database()
			db.collection('users').field({
				"_id":true,
				"imgSrc":true,
				"nickname":true,
				"likes":true,
			}).orderBy("likes",'desc').get().then(res=>{
				this.list = res.result.data
			}).catch(err=>{
				
			})
		},
		
		onShow() {
			
			
		},
		
		
		onLoad() {
			this.addRandomData();
		},
		
		methods: {
			beautify(num){
			   return num >= 1e3 && num < 1e4 ? (num / 1e3).toFixed(1) + 'k' : num >= 1e4 ? (num / 1e4).toFixed(1) + 'w' : num
			},
			
			
			remove(id) {
				this.$refs.uWaterfall.remove(id);
			},
			
			addlikes(item){
				uniCloud.callFunction({
					name:'uplikes',
					data:{
						collection: 'users',
						doc:item._id,
						data:"{likes:dbCmd.inc(1)}"
					}
				}).then(res=>{
					if(res.result.updated == 1){
						let cloneList = [...this.list]
						for (let i = 0 ; i<cloneList.length; i++) {
							if(cloneList[i]._id == item._id){
								cloneList[i].likes++;
							}
						}
						this.list = cloneList
						uni.showToast({
							icon:"success",
							title:'Thank you~'
						})
						// this.addRandomData()
					}
				}).catch(err=>{
					console.log(err)
				})
			},
			detailCli(e){
				uni.navigateTo({
					url: '/pages/detail/detail?userid='+e
				});
			}
		}
	}
</script>

<style>
	page{
			background-color: rgb(240, 240, 240);
		}
</style>

<style lang="scss" scoped>
	
	.demo-warter {
		border-radius: 8px;
		margin: 5px;
		display: inline-block;
		height: 400rpx;
		width: 350rpx;
		background-color: #ffffff;
		padding: 8px;
		position: relative;
	}
	
	.u-close {
		position: absolute;
		top: 32rpx;
		right: 32rpx;
	}
	
	.demo-image {
		width: 100%;
		border-radius: 4px;
	}
	
	.demo-title {
		font-size: 30rpx;
		display: flex;
		margin-top: 5px;
		// color: $u-main-color;
		color: pink;
	}
	
	.mylikes{
		display: flex;
		position: absolute;
		right: 40rpx;
	}
	
	
</style>
